<template>
	<view class="page">
		<view class="row">
			<view class="title">
				昵称
			</view>
			<view class="cont">
				<input v-model="form.name" type="text" placeholder="请填写呢称" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row">
			<view class="title">
				性别
			</view>
			<view class="cont">
				<radio-group @change="radioChange">
					<label v-for="(item, index) in gender" :key="item.value">
						<radio color="#E5422D" :value="item.value" :checked="index === current" />{{item.text}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="row">
			<view class="title">
				手机号
			</view>
			<view class="cont">
				<input v-model="form.phone" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row">
			<view class="title">
				年级
			</view>
			<view class="cont">
				<input v-model="form.grade" type="text" placeholder="请输入年级" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row">
			<view class="title">
				高考省份
			</view>
			<view class="cont">
				<picker :value="provinceIndex" :range="province" @change="provinceChange">
					<view class="picker-view">
						{{province[provinceIndex]}}
						<view class="iconfont iconxxjtfull"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="row">
			<view class="title">
				区县
			</view>
			<view class="cont">
				<picker :value="countyIndex" :range="county" @change="countyChange">
					<view class="picker-view">
						{{county[countyIndex]}}
						<view class="iconfont iconxxjtfull"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="btn" @click="login">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				provinceIndex: 0,
				countyIndex:0,
				gender: [{
						value: 'male',
						text: '男'
					},
					{
						value: 'female',
						text: '女'
					}
				],
				province: [
					'重庆', '四川'
				],
				county:[
					'江北区','沙坪坝区','大渡口区'
				],
				form:{
					name:'',
					phone:'',
					grade:'',
					gender:'male',
					province:'',
					county:''
				}
			}
		},
		onShow() {
			let that = this;
			
		},
		methods: {
			login(){
				let that = this;
				console.log(that.form)
			},
			provinceChange(e) {
				console.log('provinceChange', e.target.value)
				let that = this;
				that.provinceIndex = e.target.value
			},
			countyChange(e) {
				console.log('county', e.target.value)
				let that = this;
				that.countyIndex = e.target.value
			},
			radioChange(e) {
				let that = this;
				for (let i = 0; i < that.gender.length; i++) {
					if (that.gender[i].value === e.target.value) {
						that.current = i;
						console.log(that.gender[i].value)
						that.form.gender = that.gender[i].value;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'register.scss';
	@import '../../common/icon/iconfont.css';
</style>
